Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Layout: Show vertical alignment toolbar with allowSwitching enabled #67022

Conversation

Infinite-Null
Copy link
Contributor

@Infinite-Null Infinite-Null commented Nov 15, 2024

Fixes: #67016

What?

Enable vertical alignment toolbar to display when block layout has allowSwitching enabled and flex layout is active.

Why?

Currently, the vertical alignment toolbar is hidden when allowSwitching is set to true, even when flex layout is selected.

Testing Instructions

  1. Go to any post
  2. Add any block which have:
"supports": {
    "layout": {
        "allowSwitching": true
    }
}
  1. Add the block and test the block toolbar
    image

Screenshots or screencast

Before Fix:

image

After Fix:

image

Remove layout.allowSwitching condition to display vertical alignment
toolbar when flex layout is active.
Copy link

github-actions bot commented Nov 15, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Infinite-Null <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: ntsekouras <[email protected]>
Co-authored-by: tellthemachines <[email protected]>
Co-authored-by: Mayank-Tripathi32 <[email protected]>
Co-authored-by: metropoliscreative <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@Mamaduka Mamaduka added [Type] Bug An existing feature does not function as intended [Feature] Layout Layout block support, its UI controls, and style output. labels Nov 15, 2024
Comment on lines -97 to -99
if ( layoutBlockSupport?.allowSwitching ) {
return null;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this early return condition needs to be fixed. It should probably return null when both allowJustification and allowVerticalAlignment are false.

@ntsekouras, can you confirm? I think you worked on the initial implementation of this feature.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's been so long and even by looking at old PRs, I'm still not 100% sure why this check was added. If I remember correctly at that time we explicitly didn't want to show the justification controls in inspector controls too. Having said that, back then there were fewer layout props and there was no vertical alignment.

The allowJustification prop was added specifically for constraint layout but in docs says that can also be applied to flex and defaults to true. There are no checks for it now in flex layout, so I guess we need to take into account both in inspectorControls and toolBarControls.

So, I'm not sure whether the allowSwitching check is still needed, but the other checks (allowVerticalAlignment, allowJustification) should be added.

I'll cc @tellthemachines if she has more context.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't have any further context but agree this check isn't the right one here.

One thing I'm noticing now is that setting allowJustification to false doesn't actually disable the justification controls for flex layout either in the toolbar or the sidebar. That should also be addressed, but not necessarily as part of this PR.

Given that this change by itself fixes #67016 and doesn't affect anything else, I'm ok with merging this as is and fixing the justification controls separately.

Copy link
Contributor

@tellthemachines tellthemachines left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR, LGTM!

Comment on lines -97 to -99
if ( layoutBlockSupport?.allowSwitching ) {
return null;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't have any further context but agree this check isn't the right one here.

One thing I'm noticing now is that setting allowJustification to false doesn't actually disable the justification controls for flex layout either in the toolbar or the sidebar. That should also be addressed, but not necessarily as part of this PR.

Given that this change by itself fixes #67016 and doesn't affect anything else, I'm ok with merging this as is and fixing the justification controls separately.

@tellthemachines tellthemachines added the props-bot Adding this label triggers the Props Bot workflow for a PR. label Nov 18, 2024
@github-actions github-actions bot removed the props-bot Adding this label triggers the Props Bot workflow for a PR. label Nov 18, 2024
@tellthemachines tellthemachines merged commit 49401da into WordPress:trunk Nov 18, 2024
73 of 75 checks passed
@github-actions github-actions bot added this to the Gutenberg 19.8 milestone Nov 18, 2024
@tellthemachines
Copy link
Contributor

I just opened #67059 to add some allowJustification checks to flex layout.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Layout Layout block support, its UI controls, and style output. [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Cannot align inner blocks in flex layout when allowSwitching is set to true
4 participants